<template>
  <view class="detail-container">
    <view class="header-container">
      <view class="left"></view>
      <view class="center">项目介绍</view>
      <view class="right">
        <img :src="imgUrl" alt="">
      </view>
    </view>
    <view class="main-container">
      <view class="content-container">
        <view class="title">{{ title }}</view>
        <view class="time">
          <img src="~@/static/active_detail_slices/time@3x.png" alt="">
          <text>2019-09-16 14:31</text>
        </view>
        <view class="content">用于阳陂湖旅游观光</view>
      </view>
    </view>
  </view>
</template>

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  data() {
    return {
      id: "",
      title: "",
      imgUrl: ""
    };
  },
  onLoad(option: any) {
    this.id = option.id;
  },
  mounted() {
    this.getProductInfo();
  },
  methods: {
    toBack() {
      uni.navigateBack({ delta: 1 })
    },
    getProductInfo() {
      this.$mainApi.apiGetProductDetail(this.id).then(res => {
        this.title = res.data.title;
        this.imgUrl = res.data.imageUrl;
      });
    }
  }
})
</script>

<style scoped>
.detail-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.header-container {
  color: #333333;
  height: 24px;
  padding: 15px;
  flex-shrink: 0;
  display: flex;
}

.header-container .left,
.header-container .right {
  font-size: 16px;
  width: 100px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.header-container .right {
  flex-direction: row-reverse;
}

.header-container .right img {
  width: 16px;
  height: 16px;
}

.header-container .center {
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.main-container {
  flex-grow: 1;
  width: 100%;
  position: relative;
}

.content-container {
  padding: 15px;
  position: absolute;
  top: 0px;
  display: flex;
  flex-direction: column;
  width: calc(100% - 30px);
}

.content-container .title {
  color: #333333;
  font-size: 24px;
}

.content-container img {
  width: 100%;
}

.content-container .time {
  color: #333333;
  margin-top: 5px;
  margin-bottom: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.content-container .time img {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.content-container .time text {
  color: #666666;
  font-size: 16px;
  flex-grow: 1;
}

.content-container .content {
  font-size: 14px;
}

.previous-btn {
  color: #FFFFFF;
  padding: 15px 30px;
  background-color: #006b65;
  border-radius: 28px;
  position: fixed;
  left: 15px;
  bottom: 30px;
}

.next-btn {
  color: #FFFFFF;
  padding: 15px 30px;
  background-color: #006b65;
  border-radius: 28px;
  position: fixed;
  right: 15px;
  bottom: 30px;
}
</style>